<template>
	<div>
		<use-table ref="tbl"></use-table>
		<div class="container_status dflex_vertical_c">
			<div class="item_interval" v-for="(item, i) in typeDatas" :key="i">
				<el-button class="badge_txt" :class="{ active: item.name == type }" size="small" @click="cutSta(item)">{{ item.name }}</el-button>
				<v-countup class="badge" start-value="0" :end-value="item.cnt"></v-countup>
			</div>
		</div>
		<div class="container padding_b_0">
			<div class="dflex_wrap">
				<div class="dflex_vertical_c margin_r_40 margin_b_20">
					<div class="search_name">操作人：</div>
					<el-input v-model="req.create_uname" placeholder="请输入" class="search_input" @change="search" clearable></el-input>
				</div>
				<div class="dflex_vertical_c margin_r_40 margin_b_20" v-if="advancedSearch">
					<div class="search_name">操作时间：</div>
					<el-date-picker
						v-model="searchTime"
						type="daterange"
						align="right"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						format="yyyy-MM-dd"
						:picker-options="pickerTimeOptions"
						class="search_start_end_time"
						@change="search"
					></el-date-picker>
				</div>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_b_20 margin_r_40" @click="search">搜索</el-button>
				<div class="search_advanced margin_b_20" @click="advancedSearch = !advancedSearch" v-if="!advancedSearch">高级筛选</div>
				<div class="search_common margin_b_20" @click="advancedSearch = !advancedSearch" v-if="advancedSearch">常用筛选</div>
			</div>
		</div>
		<div class="container last_container use-table">
			<el-table ref="etbl" :height="tblHeight" v-loading="tableLoading" :data="tableDatas" highlight-current-row @sort-change="sortable">
				<el-table-column label="操作人" align="center">
					<template slot-scope="scope">
						<div>{{ scope.row.create_uname || '--' }}</div>
					</template>
				</el-table-column>
				<el-table-column property="oper_content" label="操作内容" align="center"></el-table-column>
				<el-table-column property="oper_type" label="操作类型" align="center"></el-table-column>
				<el-table-column property="oper_ip" label="操作ip" align="center"></el-table-column>
				<el-table-column label="备注" align="center">
					<template slot-scope="scope">
						<div>{{ scope.row.remark || '--' }}</div>
					</template>
				</el-table-column>
				<el-table-column property="create_time" sortable="custom" label="操作时间" align="center"></el-table-column>
				<div slot="empty"><el-empty description=" "></el-empty></div>
			</el-table>
			<el-pagination
				background
				:current-page="req.page"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableTotal"
				@size-change="sizeChange"
				@current-change="currentChange"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import vCountup from 'vue-countupjs';
const __name = 'wmzmall-distributor-log';
export default {
	components: { vCountup },
	data() {
		return {
			type: '全部',
			typeObj: {
				新增: 0,
				已提现: 0,
				下单收益: 0,
				提现: 0,
				提现失败: 0,
				全部: 0
			},
			typeDatas: [],
			advancedSearch: false,
			searchTime: [],
			req: {
				page: 1,
				rows: 10,
				orderby: 'create_time desc',
				oper_type: '',
				create_uname: '',
				begin_time: '',
				end_time: ''
			},
			tblHeight: 0,
			tableLoading: false,
			tableDatas: [],
			tableTotal: 0,
			pickerTimeOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
				shortcuts: [
					{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}
				]
			},
			searchBtnLoading: false
		};
	},
	methods: {
		async loadData(callback) {
			this.tableLoading = true;

			this.typeDatas = [];
			for (let key in this.typeObj) {
				this.typeDatas.push({
					name: key,
					cnt: this.typeObj[key]
				});
			}

			this.req.begin_time = '';
			this.req.end_time = '';

			if (this.searchTime && this.searchTime.length > 0) {
				this.req.begin_time = this.searchTime[0].getTime();
				this.req.end_time = this.searchTime[1].getTime() + (60 * 60 * 24 - 1) * 1000;
			}

			await this.$db[__name]
				.whereif(this.req.oper_type && this.req.oper_type != '全部', { oper_type: this.req.oper_type })
				.whereif(this.req.create_uname, { create_uname: new RegExp(this.$api.filterRegexpKey(this.req.create_uname), 'i') })
				.whereif(this.searchTime && this.searchTime.length > 0, { create_time: this.$db.$cmd.gte(this.req.begin_time).and(this.$db.$cmd.lte(this.req.end_time)) })
				.withgroup({ field: 'oper_type', obj: this.typeObj })
				.totable(this.req)
				.then(res => {
					if (res.code == 200) {
						if (res.datas.group && res.datas.group.datas) {
							this.typeDatas = res.datas.group.datas;
						}

						res.datas.rows.forEach((row, idx) => {
							row.create_time = new Date(row.create_time).format();
						});

						this.tableDatas = res.datas.rows;
						this.tableTotal = res.datas.total;
						
						if (typeof callback === 'function') {
							callback();
						}
					}
					this.searchBtnLoading = false;
					this.tableLoading = false;
				});
		},
		search() {
			this.req.page = 1;
			this.$api.storagePaginationPage(this.req.page, this.$route.path);
			this.searchBtnLoading = true;
			
			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});

			uni.setStorage({
				key: '__search' + this.$route.path,
				data: this.req
			});
		},
		sortable(column) {
			if (column.order) {
				column.order = column.order.replace('ending', '');
			}
			this.req.orderby = column.prop + ' ' + (column.order || 'desc');
			
			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		},
		cutSta(item) {
			uni.setStorage({
				key: '__cutSta' + this.$route.path,
				data: item
			});

			this.type = item.name;
			this.req.oper_type = item.name;
			this.req.page = 1;
			this.$api.storagePaginationPage(this.req.page, this.$route.path);

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		},
		sizeChange(size) {
			this.$api.storagePaginationRows(size, this.$route.path);
			this.req.page = 1;
			this.$api.storagePaginationPage(this.req.page, this.$route.path);
			this.req.rows = size;
			
			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		},
		currentChange(current) {
			this.$api.storagePaginationPage(current, this.$route.path);
			this.req.page = current;
			
			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		}
	},
	created() {
		let __search = uni.getStorageSync('__search' + this.$route.path);
		if (__search) {
			this.req = __search;
			if (this.req.begin_time && this.req.end_time) {
				this.searchTime.push(new Date(this.req.begin_time), new Date(this.req.end_time));
				this.advancedSearch = true;
			}
		}

		let thisCutSta = uni.getStorageSync('__cutSta' + this.$route.path);
		this.type = '全部';
		this.req.page = 1;
		this.req.oper_type = this.type;
		if (thisCutSta) {
			this.type = thisCutSta.name;
			this.req.oper_type = thisCutSta.name;
		}
		this.req.page = uni.getStorageSync('__paginationPage' + this.$route.path) || 1;
		this.req.rows = uni.getStorageSync('__paginationRows' + this.$route.path) || 10;
		
		this.loadData(() => {
			this.$nextTick(() => {
				this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path);
			});
		});
	},
	mounted() {
		this.$nextTick(() => {
			this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path);
		});
	},
	updated() {
		if (!this.tblHeight) {
			this.tblHeight = this.$refs.tbl.tblHeight;
		}
	}
};
</script>

<style></style>
